<!doctype html>
<html class="no-js">

<head>
    <title>幼儿园</title>
    <#include "/boya/template/meta.html" />
</head>

<body>
    <#import "/boya/template/marc.html" as mc />
    <@mc.content>
        <div id="app" class="page">
            <div class="title">证书管理 / 查看证书 /</div>
            <el-form ref="form" label-width="80px">
                <el-form-item label="标题">
                    <el-input v-model="info.title" placeholder="请输入标题" readonly></el-input>
                </el-form-item>
                <el-form-item label="附件">
                    <div class="gallery">
                        <div class="image" v-for="(item, index) in fileList" :key="index">
                            <img :src="item.url" />
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </@mc.content>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                info: {
                    id: '',
                    title: '',
                    images: ''
                },
                fileList: [],
            }
        },
        mounted: function() {
            var self = this;
            var infoJsonStr = '${info!}';
            if (infoJsonStr != '') {
                var obj = JSON.parse(infoJsonStr);
                console.log(obj);
                self.info.id = obj.id;
                self.info.title = obj.title;
                self.info.images = obj.images;
            }
            if (self.info.images && self.info.images != '') {
                var list = self.info.images.split(";");
                list.pop();
                for (var i = 0; i < list.length; i++) {
                    var map = {
                        name: list[i].split("=")[1],
                        url: list[i]
                    }
                    self.fileList.push(map);
                }
                console.log(self.fileList);
            }
        },
        methods: {
        }
    })
    </script>
    <style type="text/css">
    .page {
        padding: 15px;
    }

    .title {
        margin-bottom: 3rem;
        font-size: 1.2em;
    }

    .image {
        margin-bottom: 10px;
        width: 100%;
    }

    .image>img {
        max-width: 100%;
    }

    .hidden {
        display: none;
    }
    </style>
</body>

</html>